<!DOCTYPE html>
<html>
<head>
    <title>Vue监听器示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .container {
            margin: 20px;
            font-family: Arial, sans-serif;
        }
        .input-group {
            margin: 15px 0;
        }
        .log-box {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            max-height: 200px;
            overflow-y: auto;
        }
        .log-item {
            margin: 5px 0;
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
        input {
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <h2>Vue监听器示例</h2>

        <!-- 基础监听示例 -->
        <div class="input-group">
            <label>基础监听 - 请输入文本：</label>
            <input type="text" v-model="message">
            <p>当前文本：{{ message }}</p>
        </div>

        <!-- 数字监听示例 -->
        <div class="input-group">
            <label>数字监听：</label>
            <input type="number" v-model.number="number">
            <p>当前数字：{{ number }}</p>
        </div>

        <!-- 对象监听示例 -->
        <div class="input-group">
            <label>对象监听：</label>
            <input type="text" v-model="user.name" placeholder="用户名">
            <input type="number" v-model.number="user.age" placeholder="年龄">
        </div>

        <!-- 日志显示区域 -->
        <div class="log-box">
            <h3>变更日志：</h3>
            <div v-for="(log, index) in logs" :key="index" class="log-item">
                {{ log }}
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: '',
                    number: 0,
                    user: {
                        name: '',
                        age: 0
                    },
                    logs: []
                }
            },
            watch: {
                // 监听基础数据类型
                message(newValue, oldValue) {
                    this.addLog(`文本从 "${oldValue}" 变更为 "${newValue}"`)
                },
                
                // 监听数字
                number: {
                    handler(newValue, oldValue) {
                        this.addLog(`数字从 ${oldValue} 变更为 ${newValue}`)
                    },
                    // 立即执行
                    immediate: true
                },

                // 监听对象的某个属性
                'user.name'(newValue, oldValue) {
                    this.addLog(`用户名从 "${oldValue}" 变更为 "${newValue}"`)
                },

                // 深度监听对象
                user: {
                    handler(newValue, oldValue) {
                        this.addLog('用户信息发生变化：' + JSON.stringify(newValue))
                    },
                    // 深度监听
                    deep: true
                }
            },
            methods: {
                addLog(message) {
                    this.logs.unshift(`${new Date().toLocaleTimeString()}: ${message}`)
                }
            }
        }).mount('#app')
    </script>
</body>
</html>